<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/main.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="${V_PATH}/static/js/jPlayer/jplayer.flat.css" type="text/css" />
    <link rel="stylesheet" href="${V_PATH}/static/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="${V_PATH}/static/css/animate.css" type="text/css" />
    <link rel="stylesheet" href="${V_PATH}/static/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="${V_PATH}/static/css/simple-line-icons.css" type="text/css" />
    <link rel="stylesheet" href="${V_PATH}/static/css/font.css" type="text/css" />
    <link rel="stylesheet" href="${V_PATH}/static/css/app.css" type="text/css" />
</head>
<body>
<section class="hbox stretch">
    <section>
        <section class="vbox">
            <section class="scrollable padder-lg w-f-md" id="bjax-target">
                <a href="#" onclick="loadPage('${V_PATH}/hbox.action')" class="pull-right text-muted m-t-lg" data-toggle="class:fa-spin" ><i class="icon-refresh i-lg  inline" id="refresh"></i></a>
                <h2 class="font-thin m-b">发现 <span class="musicbar animate inline m-l-sm" style="width:20px;height:20px">
                    <span class="bar1 a1 bg-primary lter"></span>
                    <span class="bar2 a2 bg-info lt"></span>
                    <span class="bar3 a3 bg-success"></span>
                    <span class="bar4 a4 bg-warning dk"></span>
                    <span class="bar5 a5 bg-danger dker"></span>
                  </span></h2>
                <div class="row row-sm" id="descMusic">
	                <!--模板效应  -->
	                <c:if test="${!empty DESC_MUSIC}">
	                	<c:forEach var="music" items="${DESC_MUSIC}">
	                		<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                        <div class="item">
		                            <div class="pos-rlt">
		                                <div class="item-overlay opacity r r-2x bg-black">
		                                    <div class="center text-center m-t-n">
		                                        <a href="javascript:;" data-toggle="class" onclick="playMusic('${music.id}','${music.musicUri}','${music.name }','${music.author }')">
		                                            <i class="icon-control-play i-2x text"></i>
		                                            <i class="icon-control-play i-2x text-active"></i>
		                                        </a>
		                                    </div>
		                                    <div class="bottom padder m-b-sm">
		                                        <a href="#" onclick="addMusic('${music.id}','${music.musicUri}','${music.name }','${music.author }')" data-toggle="class">
		                                            <i class="fa fa-plus-circle text"></i>
		                                            <i class="fa fa-check-circle text-active text-info"></i>
		                                        </a>
		                                    </div>
		                                </div>
		                                <a href="#"><img src="${V_PATH}${music.imgUri}" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                                <a href="javascript:;" onclick="loadMusicInfo('${music.id}','${music.cateId}','${music.authorId }')" class="text-ellipsis">${music.name }</a>
		                                <a href="javascript:;" class="text-ellipsis text-xs text-muted">${music.author}</a>
		                            </div>
		                        </div>
		                    </div>	
	                	</c:forEach>
	                </c:if>
                </div>
                <div class="row">
                    <div class="col-md-7">
                        <h3 class="font-thin">新音乐</h3>
                        <div class="row row-sm">
                          	<!-- 新音乐模板 -->
                          	<c:if test="${!empty NEW_MUSIC}">
			                	<c:forEach var="music" items="${NEW_MUSIC}">
			                		<div class="col-xs-6 col-sm-3">
		                                <div class="item">
		                                    <div class="pos-rlt">
		                                        <div class="item-overlay opacity r r-2x bg-black">
		                                            <div class="center text-center m-t-n">
		                                                <a href="javascript:;"  onclick="playMusic('${music.id}','${music.musicUri}','${music.name }','${music.author }')"><i class="fa fa-play-circle i-2x"></i></a>
		                                            </div>
		                                        </div>
		                                        <a href="javascript:;"><img src="${V_PATH}${music.imgUri}" alt="" class="r r-2x img-full"></a>
		                                    </div>
		                                    <div class="padder-v">
		                                        <a href="javascript:;" onclick="loadMusicInfo('${music.id}','${music.cateId}','${music.authorId }')" class="text-ellipsis">${music.name }</a>
		                                        <a href="javascript:;" class="text-ellipsis text-xs text-muted">${music.author}</a>
		                                    </div>
		                                </div>
		                            </div>	
			                	</c:forEach>
			                </c:if>                  
                        </div>
                    </div>
                    <div class="col-md-5">
                        <h3 class="font-thin">排行榜</h3>
                        <div class="list-group bg-white list-group-lg no-bg auto">
							<c:if test="${!empty RANK_MUSIC}">
			                	<c:forEach var="music" items="${RANK_MUSIC}" varStatus="num" >
			                		<a href="javascript:;" class="list-group-item clearfix" onclick="playMusic('${music.id}','${music.musicUri}','${music.name }','${music.author }')">
		                                <span class="pull-right h2 text-muted m-l">${num.index+1 }</span>
		                          		<span class="pull-left thumb-sm avatar m-r">
		                            		<img style="max-height: 40px" src="${V_PATH}${music.imgUri}" alt="...">
		                          		</span>
		                         		<span class="clear">
		                           			<span onclick="loadMusicInfo('${music.id}','${music.cateId}','${music.authorId }')">${music.name }</span>
				                            <small class="text-muted clear text-ellipsis">by ${music.author}</small>
				                        </span>
		                            </a>
			                	</c:forEach>
		                	</c:if>
                        </div>
                    </div>
                </div>
            </section>
            <footer class="footer bg-dark">
                <div id="jp_container_N">
                    <div class="jp-type-playlist">
                        <div id="jplayer_N" class="jp-jplayer hide"></div>
                        <div class="jp-gui">
                            <div class="jp-video-play hide">
                                <a class="jp-video-play-icon">play</a>
                            </div>
                            <div class="jp-interface">
                                <div class="jp-controls">
                                    <div><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a></div>
                                    <div>
                                        <a class="jp-play"><i class="icon-control-play i-2x"></i></a>
                                        <a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
                                    </div>
                                    <div><a class="jp-next"><i class="icon-control-forward i-lg"></i></a></div>
                                    <div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a></div>
                                    <div><a class="" data-toggle="dropdown" data-target="#playlist"><i class="icon-list"></i></a></div>
                                    <div class="jp-progress hidden-xs">
                                        <div class="jp-seek-bar dk">
                                            <div class="jp-play-bar bg-info">
                                            </div>
                                            <div class="jp-title text-lt">
                                                <ul>
                                                    <li></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
                                    <div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
                                    <div class="hidden-xs hidden-sm">
                                        <a class="jp-mute" title="mute"><i class="icon-volume-2"></i></a>
                                        <a class="jp-unmute hid" title="unmute"><i class="icon-volume-off"></i></a>
                                    </div>
                                    <div class="hidden-xs hidden-sm jp-volume">
                                        <div class="jp-volume-bar dk">
                                            <div class="jp-volume-bar-value lter"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <a class="jp-shuffle" title="shuffle"><i class="icon-shuffle text-muted"></i></a>
                                        <a class="jp-shuffle-off hid" title="shuffle off"><i class="icon-shuffle text-lt"></i></a>
                                    </div>
                                    <div>
                                        <a class="jp-repeat" title="repeat"><i class="icon-loop text-muted"></i></a>
                                        <a class="jp-repeat-off hid" title="repeat off"><i class="icon-loop text-lt"></i></a>
                                    </div>
                                    <div class="hide">
                                        <a class="jp-full-screen" title="full screen"><i class="fa fa-expand"></i></a>
                                        <a class="jp-restore-screen" title="restore screen"><i class="fa fa-compress text-lt"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="jp-playlist dropup" id="playlist">
                            <ul class="dropdown-menu aside-xl dker">
                                <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                                <li class="list-group-item"></li>
                            </ul>
                        </div>
                        <div class="jp-no-solution hide">
                            <span>Update Required</span>
                            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                        </div>
                    </div>
                </div>
            </footer>
        
        </section>
    </section>
</section>
  <script src="${V_PATH}/static/js/app.plugin.js"></script>
  <script type="text/javascript" src="${V_PATH}/static/js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="${V_PATH}/static/js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="${V_PATH}/static/js/jPlayer/demo.js"></script>
  <script type="text/javascript" src="${V_PATH}/static/hbox/hbox.js"></script>
</body>
</html>